<?php?>
<html>
<head>
<script language="javascript" type="text/javascript" src="../arborjs/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="../arborjs/arbor.js" ></script>
<script language="javascript" type="text/javascript" src="../arborjs/graphics.js" ></script>
<script language="javascript" type="text/javascript" src="../arborjs/renderer.js" ></script>
<link charset="utf-8" type="text/css" href="../arborjs/arbor.css" rel="stylesheet">
</head>
<body>
<div align="center"><canvas  id="viewport" width="1000" height="640"></canvas></div>
<script language="javascript" type="text/javascript">

var sys = arbor.ParticleSystem(1000, 400,1);
sys.parameters({stiffness:900, repulsion:2000, gravity:true, dt:0.015})
sys.renderer = Renderer("#viewport") ;
//cach 1
var data = {
            nodes:{
            animals:{color:"gray","block":"dot",label:"cach 1"},
            dog:{color:"green",shape:"dot",label:"dog",link:"http://stackoverflow.com"},
            cat:{color:"blue",shape:"dot",label:"cat"}
            },
            edges:{
                animals:{ 
                    dog:{directed:{edge:"->"},color:"blue",name:"asd",font:"italic 13px sans-serif"},
                    cat:{name:"A->D"}
                },
                    
            }
};
sys.graft(data);

//cach 2
var x = sys.addNode(1,{color:"gray","block":"dot",label:"cach 2",link:"http://stackoverflow.com"});
var y = sys.addNode(2,{color:"gray","block":"dot",label:"y"});

sys.addEdge(x,y, {directed:{edge:"->"},color:"green",name:"asd",font:"bold 20px sans-serif"})
var z = sys.addNode(3,{color:"gray","block":"dot",label:"z"});
sys.addEdge(x,z, {directed:{edge:"->"},color:"blue",name:"asd",font:"italic 13px sans-serif"})
<?php

?>
/*var project = sys.addNode(1,{color:"gray","shape":"dot",label:"Blackbox survey",link:""});
var luan = sys.addNode(2,{color:"#95cde5","shape":"block",label:"Luan",link:""});
var hoang = sys.addNode(3,{color:"#b01700","shape":"dependencia",label:"Hoang"});
var giang = sys.addNode(4,{color:"red","shape":"block",label:"Giang"});

sys.addEdge(project,luan, {directed:{edge:"->"},color:"green",name:"Project Manager",font:"italic 13px sans-serif"})
sys.addEdge(project,hoang, {directed:{edge:"->"},color:"blue",name:"Tester",font:"italic 13px sans-serif"})
sys.addEdge(project,giang, {directed:{edge:"->"},color:"red",name:"Designer"})*/
</script>
</body>
</html>